import React, { createContext, useReducer, useContext } from 'react'

export const ColorContext = createContext({
    color: 'blue'
})
export const UPDATE_COLOR = 'UPDATE_COLOR'

const reducer = (state, action) => {
    switch (action.type) {
        case UPDATE_COLOR:
            return action.color
        default:
            return state
    }
}

const Color = props => {
    const store = useContext(ColorContext)
    const [color, dispatch] = useReducer(reducer, store.color)
    return (
        <ColorContext.Provider value={{ color, dispatch }}>{props.children}</ColorContext.Provider>
    )
}
export default Color
